<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="{$Think.config.RESOURCEURL}wx_assets/css/storedetail/style.css{$Think.config.RESOURCE_VER}" media="all">
    <link rel="stylesheet" type="text/css" href="{$Think.config.RESOURCEURL}wx_assets/css/storedetail/back.css{$Think.config.RESOURCE_VER}" media="all">
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}"></script>
    <link href="{$Think.config.RESOURCEURL}wx_assets/dist/gmu.css{$Think.config.RESOURCE_VER}" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/dist/gmu.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/personCenter/js/mediaQuery.min.js{$Think.config.RESOURCE_VER}"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
    <title>{$name}</title>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <!-- Mobile Devices Support @begin -->
    <meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
    <meta content="no-cache" http-equiv="pragma">
    <meta content="0" http-equiv="expires">
    <meta content="telephone=yes, address=no" name="format-detection">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- apple devices fullscreen -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- Mobile Devices Support @end -->
   <style>
       @font-face {
           font-family: 'iconfont';  /* project id 81245 */
           src: url('//at.alicdn.com/t/font_9883r7e4t0jatt9.eot');
           src: url('//at.alicdn.com/t/font_9883r7e4t0jatt9.eot?#iefix') format('embedded-opentype'),
           url('//at.alicdn.com/t/font_9883r7e4t0jatt9.woff') format('woff'),
           url('//at.alicdn.com/t/font_9883r7e4t0jatt9.ttf') format('truetype'),
           url('//at.alicdn.com/t/font_9883r7e4t0jatt9.svg#iconfont') format('svg');
       }        @font-face {
           font-family: 'iconfont';  /* project id 201523 */
           src: url('//at.alicdn.com/t/font_22e3ksxvjqncdi.eot');
           src: url('//at.alicdn.com/t/font_22e3ksxvjqncdi.eot?#iefix') format('embedded-opentype'),
           url('//at.alicdn.com/t/font_22e3ksxvjqncdi.woff') format('woff'),
           url('//at.alicdn.com/t/font_22e3ksxvjqncdi.ttf') format('truetype'),
           url('//at.alicdn.com/t/font_22e3ksxvjqncdi.svg#iconfont') format('svg');
       }
       .iconfont{
           font-family:iconfont;
       }
       body{
           background-color:#F0EFF4;
           font-size:14px;
       }
       .store_info{
           margin:10px 0;
           background-color:white;
           padding-left:10px;
       }
       .store_info>div{
           border-bottom:1px solid #E5E5E5;
       }
       .store_info>div:last-child{
           border:0;
       }
       .store_info>div>label{
           display: inline-block;
           width: 60px;
           line-height: 45px;
           vertical-align: top;
       }
       .store_info>div>input,.store_info>div .address{
           width: -webkit-calc(100% - 60px);
           padding: 5px;
           box-sizing: border-box;
           height: 46px;
       }
       .address{
           position:relative;
           display:inline-block;
           height:auto;
       }
       .address input{
           line-height: 30px;
           width: 100%;
           height: 100%;
       }
       .address .cityselect{
           display: inline-block;
           padding: 0 5px;
           width: -webkit-calc(50% - 10px);
           box-sizing:border-box;
           height: 30px;
           text-align: left;
           position:relative;
           line-height: 20px;
           border:1px solid #ccc;
           margin-bottom:10px;
       }
       .address .cityselect:nth-child(odd){
           margin-right:20px;
       }
       .address .cityselect>i{
           position: absolute;
           right: 10px;
           top: 5px;
           color: #ccc;
       }
       .address select{
           padding: 0;
           width: 100%;
           position: absolute;
           left: 0;
           top: 0;
           height:30px;
           margin-right: 6px;
           opacity: 0;
       }
       .address textarea{
           resize: none;
           border: 1px solid #ccc;
           width: 100%;
           box-sizing: border-box;
           height:85px;
       }
       .service,.store_pic{
           padding-bottom:10px;
       }
       .service li{
           display: inline-block;
           min-width: 50px;
           padding: 3px 5px;
           text-align: center;
           border-radius: 4px;
           color: #ccc;
           border: 1px solid #ccc;
           margin: 5px;
       }
       .service li.current{
           background-color: #1BACFD;
           border-color: #1BACFD;
           color: white;
       }
       .store_pic li{
           width: 1.6rem;
           margin: 10px;
           height: 1.14rem;
           position: relative;
           box-sizing: border-box;
           display:inline-block;
           overflow: hidden;
       }
       .store_pic li img{
           max-width: 100%;
           position: absolute;
           top: 50%;
           transform: translate(0,-50%);
           -webkit-transform: translate(0,-50%);
       }
       .store_pic li .del{
           position: absolute;
           right: 0;
           top: 0;
           font-size: 16px;
           transform: translate(50%,-50%);
           -webkit-transform: translate(50%,-50%);
       }
       .store_pic li.add{
           background-color:#F4F4F4;
           border:1px solid #DCDCDC;
           box-sizing:border-box;
       }
       .store_pic li.add a{
           position: absolute;
           width:0.6rem;
           height:0.6rem;
           left: 50%;
           top: 50%;
           transform: translate(-50%,-50%);
           -webkit-transform: translate(-50%,-50%);
           border:1px solid #DCDCDC;
       }
       .store_pic li.add a:before{
           content:"";
           width:50%;
           display:block;
           position: absolute;
           left: 50%;
           top: 50%;
           transform: translate(-50%,-50%);
           -webkit-transform: translate(-50%,-50%);
           border-top:2px solid #DCDCDC;
       }
       .store_pic li.add a:after{
           content:"";
           height:50%;
           display:block;
           position: absolute;
           left: 50%;
           top: 50%;
           transform: translate(-50%,-50%);
           -webkit-transform: translate(-50%,-50%);
           border-left:2px solid #DCDCDC;
       }
       .menu{
           margin-top:20px;
           padding:0 10px;
       }
       .menu a{
           display:block;
           border-radius:4px;
           padding:10px 0;
           margin:10px 0;
           text-align: center;
       }
       .menu a:first-child{
           background-color:#1BACFD;
           color:white;
       }
       .menu a:last-child{
           background-color:white;
           color:#333;
       }

       .iconfont{
           font-family: iconfont;
           color:#20ABFC;
           font-size: 20px;
       }
       .detail-slider-container{
           background-color:white;
       }
       .ui-slider-item{
           height:3.96rem;
       }
       .detail-slider-container img{
           max-width: 100%;
           max-height: 100%;
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%,-50%);
           -webkit-transform: translate(-50%,-50%);
       }
       .ui-slider-dots{
           left:50%;
       }
       .ui-slider-dots .ui-state-active{
           background-color:#10A7FF;
       }
       .service{
           background-color:white;
           padding:0 10px 5px;
           margin-top:10px;
       }
       .service label{
           font-size:16px;
           line-height:30px;
       }
       .service li{
           display: inline-block;
           min-width: 50px;
           padding: 3px 5px;
           text-align: center;
           border-radius: 4px;
           background-color: #1BACFD;
           border-color: #1BACFD;
           color: white;
           margin: 5px;
       }
   </style>
</head>
<body onselectstart="return true;" ondragstart="return false;">

    <div class="wrapper" id="container">
        <!-- start -->
        <div>
            <div class="detail-slider-container" style="margin-top: 0px;position:relative">
                <ul class="pro-list" id="detail-slider" >
                    <volist name="picUrl1" id="picItem">
                        <li l="true">
                            <img class="default" src="{$picItem['picUrl']}">
                        </li>
                    </volist>
                </ul>
            </div>
            <script type="text/javascript">
                var loop = $("#detail-slider li").size() > 2;
                $("#detail-slider").slider({
                    loop: loop,
                    imgZoom: false,
                    arrow: false,
                    autoPlay: false,
                    slide: function(e, to, from) {}
                });
                if ($("#detail-slider li").size() > 1) {
                    $(".ui-slider-dots").css("marginLeft", $(".ui-slider-dots").width() / 2 * -1);
                } else {
                    $(".ui-slider-dots").hide();
                }
            </script>
        </div>
         <div class="box">
          <h3>{$name}</h3>
             <div class="box_time" id="place">
                 <span class='detail iconfont'>&#xe602;</span>
                 {$province}{$city}{$country}{$address}
                 <span class='right iconfont'>&#xe614;</span>
             </div>
          	<div class="box_time">
	          		<a href="tel:{$phone}" >
		          		<div>
			          		<span class='phone iconfont'>&#xe60f;</span>
			          		 {$phone}
                            <span class='right iconfont'>&#xe614;</span>
		          		</div>
	          		</a>
	      	</div>
	      </div>
        <div class="service">
            <label>服务项目</label>
            <ul>
                <volist name="serviceList" id="service">
                    <li>{$service.name}</li>
                </volist>
            </ul>
        </div>
        

         
        <!--<if condition="($longitude gt 0) AND ($latitude gt 0) ">-->
        <!--&lt;!&ndash; 地图 start &ndash;&gt;-->
        <!--<div class="box">-->
            <!--<h3>地图</h3>-->
            <!--<div class="box_map">-->
                <!--<div class="map_area">-->
                    <!--<img id="mapImg" onclick="Index.goMap();return false;" src="http://api.map.baidu.com/staticimage?width=300&height=280&center={$longitude},{$latitude}&zoom=15"  height="280" width="100%">-->
                    <!--&lt;!&ndash;-->
                    <!--<img id="mapImg" onclick="Index.goMap();return false;" src="http://api.map.baidu.com/staticimage?center={$longitude},{$latitude}&width=300&height=150&zoom=15&scale=2"  height="150" width="100%">-->
                     <!--&ndash;&gt;-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
  		<!--</if>-->
  		
        <!-- 地图 end -->
            </div>
    <script>
        $("#place").click(function(){
             location.href = "http://api.map.baidu.com/marker?location={$latitude},{$longitude}&title={$name}&output=html";
        });
    </script>
    <script>
        wx_share.init({
            "title":"{$name}",
            "desc":'{$province}{$city}{$country}{$address}',
            "link":window.location.href,
            "imgUrl": '{$picUrl}',
            "pkg":{
                "appId": '{$pkg.appId}',
                "timestamp": '{$pkg.timestamp}',
                "nonceStr": '{$pkg.nonceStr}',
                "signature": '{$pkg.signature}'
            },
            success:function(config,shareType){
            }
        });
    </script>
</body>
</html>
